<script lang="ts" setup name="ShowSql">
import { ref } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  previewData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (event: 'cancel'): void
  (event: 'confirm'): void
}>()
const { t } = useConfig()
const dVisible = ref(props.visible)

watch(
  () => props.visible,
  async visible => {
    dVisible.value = visible
  }
)

const handelClosed = () => {
  dVisible.value = false
  emits('cancel')
}
const handelConfirm = async () => {
  emits('cancel')
}
</script>

<template>
  <el-dialog
    v-model="dVisible"
    class="form-design"
    width="1200px"
    title="预览sql"
    draggable
    :close-on-click-modal="false"
    @closed="handelClosed"
  >
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelClosed">{{ t("action.cancel") }}</el-button>
        <el-button type="primary" @click="handelConfirm">
          {{ t("action.sure") }}
        </el-button>
      </span>
    </template>
    <el-row>
      <el-col :span="24" class="elcol">
        <IkMonacoEditor
          class="w-full"
          language="sql"
          :height="600"
          :code="props.previewData || ''"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style lang="scss" scoped>
.elfz {
  font-size: 14px;
  font-weight: 400;
}
// .el-left {
//   overflow-x: auto;
//   overflow-y: hidden;
//   max-width: 101%;
// }

.elcol {
  font-size: 14px;
  font-weight: 400;
  height: 600px;
  overflow: auto;
}

.el-tree-node__label {
  margin: 5px !important;
}

.tree-node {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;

  .node-label {
    margin-left: 10px;
  }
}

.dow-right {
  display: inline-block;
  cursor: pointer;
  color: #0188ff;
  padding: 0 16px;
}
</style>
